<template>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
             title="选择位置"
             width="500px"
             @close="close">
    <flexbox align="stretch">
      <flexbox-item>
        <div class="area-title">定位</div>
        <el-autocomplete v-model="searchInput"
                         :fetch-suggestions="querySearchAsync"
                         style="width: 100%;"
                         placeholder="请输入详细位置名称"
                         @blur="inputBlur"
                         @focus="inputFocus"
                         @select="handleSelect">
          <!--          <template slot-scope="{ item }">-->
          <template #default="{ item }">
            <div class="name">{{ item.address + item.title }}</div>
          </template>
        </el-autocomplete>
        <div ref="chosemapRef" class="map"/>
      </flexbox-item>
    </flexbox>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="selectSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import VDistpicker from '/src/szcomponent/VDistpicker/index.js'
import {baiduMap, getBaiduMap} from '/src/utils/index.js'

defineOptions({
  name: 'ChangeAddress',
})

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  value: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const chosemapRef = ref()

const emits = defineEmits(['close', 'select'])


const optionData = reactive({
  map: null,
  searchInput: '', // 搜索
  dialogVisible: false,
  searchCopyInput: '', // 避免修改
  pointAddress: null // 经纬度点
})
const {map, searchInput, dialogVisible, searchCopyInput, pointAddress} = toRefs(optionData)

watch(() => props.show, (val) => {
  optionData.dialogVisible = val
  if (val) {
    nextTick(() => {
      baiduMap().then(() => {
        const map = new BMap.Map(chosemapRef.value, {enableMapClick: true});
        const point = props.value;
        map.centerAndZoom(point, 14)
        map.enableScrollWheelZoom()
        optionData.map = map
        addMarkerLabel(point)
      })
    })
  }
})


function querySearchAsync(queryString, cb) {
  if (queryString) {
    const options = {
      onSearchComplete: function (results) {
        if (local.getStatus() == BMAP_STATUS_SUCCESS) {
          var address = []
          for (var i = 0; i < results.getCurrentNumPois(); i++) {
            address.push(results.getPoi(i))
          }
          cb(address)
        } else {
          cb([])
        }
      },
      pageCapacity: 20
    }
    const local = new BMap.LocalSearch(optionData.map, options);
    local.search(queryString)
  } else {
    cb([])
  }
}

/**
 * 搜索结果选择
 **/
function handleSelect(item) {
  optionData.searchInput = item.address + item.title
  optionData.searchCopyInput = optionData.searchInput // 只能通过这种方式修改

  addMarkerLabel(item.point)
  optionData.pointAddress = item
}

/**
 * Input 失去焦点  searchInput 只能通过选择更改
 **/
function inputBlur() {
  if (optionData.searchCopyInput !== optionData.searchInput) {
    optionData.searchInput = optionData.searchCopyInput
  }
}

function inputFocus() {
  optionData.searchCopyInput = optionData.searchInput
}

/**
 * 创建标注
 */
function addMarkerLabel(point) {
  optionData.map.clearOverlays()
  optionData.map.centerAndZoom(point, 14)
  optionData.map.addOverlay(new BMap.Marker(point))
}


/**
 * 关闭
 */
function close() {
  emits('close')
}

/**
 * 确定选择
 */
function selectSure() {
  emits('select', optionData.pointAddress)
  close()
}


</script>


<script type="text/javascript">


export default {

  components: {
    VDistpicker
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.map {
  height: 150px;
  width: 100%;
  overflow: hidden;
  margin-top: 5px;
}

.area-title {
  font-size: 12px;
  color: #aaa;
  padding-bottom: 10px;
}

.distpicker-address-wrapper :deep(select) {
  height: 34px;
  font-size: 12px;
  border-radius: 0.1rem;
}

:deep( .el-dialog__body) {
  padding: 10px 20px 20px;
}
</style>
